import { getrouterList, getroledel } from "../../reques";
import React, { useEffect, useState } from 'react';
import { Space, Table, Tree, Button, Modal, message } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;

const List = () => {
    const { TreeNode } = Tree;

    //定义存储列表数据的空数组
    const [rolelist, setrolelist] = useState([])

    //定义存放级层菜单栏的空数组
    const [tableData, setTableData] = useState([])
    useEffect(() => {
        getrouterList().then(res => {
            // console.log(res, "role")

            //将接受到的权限数据map
            let roleData = res.data.data.map(item => {
                //筛选pid的一级菜单
                let parents = item.auths.filter(v => v.pid == 0)
                // console.log(parents,'一级')

                //将一级菜单map根据一级的pid筛选二级
                parents = parents.map(a => {
                    //将筛选到的pid匹配传入子数组
                    a.children = item.auths.filter(b => b.pid == a.id)
                    return a
                }
                )
                item.authTree = parents
                return item

            })
            setTableData(roleData)
            let { data: { code, data } } = res
            if (code == 200) {
                setrolelist([...data].map(item => {
                    item.key = item.id
                    return item
                }))
            }
        })
    }, [])


    // del
    const del = (id) => {
        console.log(id)
        confirm({
            title: '确认删除?',
            icon: <ExclamationCircleFilled />,
            content: '您真的要删除吗？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
                console.log('OK');
                getroledel(id).then(res => {
                    // console.log(res, 'roledel')
                    let {data:{code,msg}}=res
                    if(code==200){
                        let index=tableData.findIndex(item=>item.id==id)
                        tableData.splice(index,1)
                        setTableData([...tableData])
                        message.success(msg,1.5)
                    }else{
                        message.error(msg,1.5)
                    }
                })
            },
            onCancel() {
                 message.error('取消成功',1.5)
            },
        });
    }


    // console.log(tableData)
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'key',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
        },
        {
            title: '权限',
            dataIndex: 'authTree',
            key: 'authTree',
            render: authTree => (
                <Space size="middle">
                    <Tree>
                        {authTree.map(item => {
                            return (
                                <TreeNode title={item.name} key={item.id} >
                                    {
                                        item.children.map(child => {
                                            return <TreeNode title={child.name} key={child.id} />
                                        })
                                    }
                                </TreeNode>
                            )
                        })}

                    </Tree>
                </Space>
            ),
        },

        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a href={'#/home/Role/edit/'+record.id}>编辑 </a>
                    <a onClick={() => del(record.id)}>删除</a>
                </Space>
            ),
        },
    ];
    // const onSelect = (selectedKeys, info) => {
    //     console.log('selected', selectedKeys, info);
    // };
    // const onCheck = (checkedKeys, info) => {
    //     console.log('onCheck', checkedKeys, info);
    // };

    //     {
    //         title: 'parent 1',
    //         key: '0-0',
    //         children: [
    //             {
    //                 title: 'parent 1-0',
    //                 key: '0-0-0',
    //                 // disabled: true,

    //             },
    //             {
    //                 title: 'parent 1-1',
    //                 key: '0-0-1',

    //             },
    //         ],
    //     },
    // ];

    return (
        <div>
            <Button type="primary" href="#/home/role/add">添加</Button>
            <Table columns={columns} dataSource={tableData} />
        </div>
    )
}
export default List;